<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(x) {
            var div = document.getElementById("div");
           div.style.backgroundColor = x.value;
        }
    </script>
</head>
<body>
<div id="div" style="width: 1000px;height: 100px">
    <table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%">
        <tr>
            <td><input type="radio" name="color" value="red" onclick="f(this)">红色</td>
            <td><input type="radio" name="color" value="yellow" onclick="f(this)">黄色</td>
            <td><input type="radio" name="color" value="green" onclick="f(this)">绿色</td>
        </tr>
        <tr>
            <td><input type="radio"  name="color" value="blue" onclick="f(this)">蓝色</td>
            <td><input type="radio"  name="color" value="purple" onclick="f(this)">紫色</td>
            <td><input type="radio"  name="color" value="black" onclick="f(this)">黑色</td>
        </tr>
    </table>
</div>
</body>
</html>